<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="js/jquery/plugins/jqtransform/jqtransform.css" />
<title>Mobile Admin</title>
<script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery/plugins/jqtransform/jqtransform.js" ></script>
<script type="text/javascript" src="js/jquery/plugins/accordion/jquery.accordion.js"></script>
<!--[if IE]><script language="javascript" type="text/javascript" src="js/jquery/plugins/flotgraph/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="js/jquery/plugins/flotgraph/jquery.flot.js"></script>

<script language="javascript" type="text/javascript" src="js/jquery/plugins/flotgraph/jquery.flot.selection.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
	/*Set skin for select, options and checkbox*/
	$('.skinnable').jqTransform({imgPath:'img/'});
	
	/*Create visitors graphs*/
	var d = [[1196463600000, 0], [1196550000000, 0], [1196636400000, 0], [1196722800000, 1000], [1196809200000, 3636], [1196895600000, 3575], [1196982000000, 2736], [1197068400000, 1086], [1197154800000, 676], [1197241200000, 1205], [1197327600000, 906], [1197414000000, 710], [1197500400000, 639], [1197586800000, 540], [1197673200000, 435], [1197759600000, 301], [1197846000000, 575], [1197932400000, 481], [1198018800000, 591], [1198105200000, 608], [1198191600000, 459], [1198278000000, 234], [1198364400000, 1352], [1198450800000, 686], [1198537200000, 279], [1198623600000, 449], [1198710000000, 468], [1198796400000, 392], [1198882800000, 282], [1198969200000, 208], [1199055600000, 229], [1199142000000, 177], [1199228400000, 374], [1199314800000, 436], [1199401200000, 404], [1199487600000, 253], [1199574000000, 218], [1199660400000, 476]];
	
    for(var i = 0; i < d.length; ++i)
	{
		d[i][0] += 60 * 60 * 1000;
	}
	
    function weekendAreas(axes) {
        var markings = [];
        var d = new Date(axes.xaxis.min);
        // go to the first Saturday
        d.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 1) % 7))
        d.setUTCSeconds(0);
        d.setUTCMinutes(0);
        d.setUTCHours(0);
        var i = d.getTime();
        do {
            markings.push({ xaxis: { from: i, to: i + 2 * 24 * 60 * 60 * 1000 } });
            i += 7 * 24 * 60 * 60 * 1000;
        } while (i < axes.xaxis.max);

        return markings;
    }
    
    var options = {
        xaxis: { mode: "time" },
        selection: { mode: "x" },
        grid: {},
		colors: ["#638425"]
    };
	
    var plot = $.plot($("#visits"), [d], options);
	
	
	/*table row select*/
	$("table.grid thead tr th.col-row-select input").click(function() {
		if(!$(this).is(":checked")) {
			$("table.grid tbody tr td.col-row-select input").each(function() {
				$(this).attr("checked",  true);
				$(this).change();
			});
		}
		else
		{
			$("table.grid tbody tr td.col-row-select input").each(function() {
				$(this).attr("checked",  false);
				$(this).change();
			});
		}
	});
	
	/*Create accordion*/
	$(".accordion").accordion({ 
		header: ".accordion-tab", 
		alwaysOpen: false,
		active: false,
		autoheight: false
	});
});
</script>
</head>

<body>
<div class="container">
  <div class="header">
    <div class="welcome">
      <div class="welcome-border-middle"> <span>Hello <a href="" >John</a>, you have <a>6 messages</a></span> </div>

      <div class="welcome-border-bottom"></div>
    </div>
    <div class="banner"> <img src="images/logo.png" alt="logo" /> </div>
  </div>
  <div class="frame">
    <div class="frame-border-top"></div>
    <div class="frame-border-middle">
      <h1 class="header">Dashboard</h1>

      <ul class="keyboard">
        <li> <a class="link-button" href=""> <img src="images/icon_user.png" alt="user" width="39" height="38"/> </a>
          <label>user</label>
        </li>
        <li> <a class="link-button" href=""> <img src="images/icon_write.png" alt="write" width="39" height="38"/> </a>

          <label>write</label>
        </li>
        <li> <a class="link-button" href=""> <img src="images/icon_message.png" alt="message" width="39" height="38"/> </a>
          <label>messages</label>
        </li>
        <li> <a class="link-button" href=""> <img src="images/icon_security.png" alt="security" width="39" height="38"/> </a>

          <label>security</label>
        </li>
        <li> <a class="link-button" href=""> <img src="images/icon_event.png" alt="event" width="39" height="38"/> </a>
          <label>events</label>
        </li>
        <li> <a class="link-button" href=""> <img src="images/icon_info.png" alt="info" width="39" height="38"/> </a>

          <label>info</label>
        </li>
      </ul>
      <div class="accordion">
        <div class="accordion-tab">
          <h1>Forms</h1>
          <div class="accordion-tab-open-close"></div>
          <div class="clear"></div>

        </div>
        <div class="accordion-panel">
          <div class="accordion-panel-border-top">
            <div class="accordion-panel-border-bottom">
              <form method="post" action="index.html" >
                <div class="form-row padding-lr-5">
                  <label>Form Input</label>
                  <input type="text" name="form_input"/>

                  <div class="clear"></div>
                </div>
                <div class="form-row padding-lr-5 skinnable">
                  <label>Drop-down</label>
                  <select name="form_select" style="width:254px;">
                    <option value="1" selected="selected">Option 1</option>
                    <option value="2">Option 2</option>

                    <option value="3">Option 3</option>
                  </select>
                  <div class="clear"></div>
                </div>
                <div class="form-row padding-lr-5 skinnable">
                  <div class="form-col-left">
                    <input type="checkbox" name="checkbox" id="checkbox" />
                    <label for="checkbox" style="margin-top:13px;">This is a checkbox</label>

                    <div class="clear"></div>
                  </div>
                  <div class="form-col-right">
                    <div>
                      <input type="radio" name="radio_group_1" value="1" id="radio_group_1_0" checked="checked" />
                      <label for="radio_group_1_0" style="margin-top:13px;">Option 1</label>
                      <div class="clear"></div>
                    </div>

                    <div>
                      <input type="radio" name="radio_group_1" value="2" id="radio_group_1_1" />
                      <label for="radio_group_1_1" style="margin-top:13px;">Option 2</label>
                      <div class="clear"></div>
                    </div>
                    <div class="clear"></div>
                  </div>
                  <div class="clear"></div>

                </div>
                <div class="form-row padding-lr-3">
                  <label>Text Area</label>
                  <div class="textarea-wrapper">
                  	<textarea name="textarea" cols="34" rows="7"></textarea>
                  </div>
                  <div class="clear"></div>
                </div>

                <div class="form-row padding-lr-15"> <a class="link-button submit" href=""><span>Submit</span></a>
                  <div class="clear"></div>
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="accordion-tab">

          <h1>Graphs</h1>
          <div class="accordion-tab-open-close"></div>
          <div class="clear"></div>
        </div>
        <div class="accordion-panel">
          <div class="accordion-panel-border-top">
            <div class="accordion-panel-border-bottom">
              <label>Visits</label>

              <div id="visits" class="graphs"></div>
            </div>
          </div>
        </div>
        <div class="accordion-tab">
          <h1>Tables</h1>
          <div class="accordion-tab-open-close"></div>
          <div class="clear"></div>

        </div>
        <div class="accordion-panel">
          <div class="accordion-panel-border-top">
            <div class="accordion-panel-border-bottom">
              <form method="post" action="index.html" class="skinnable">
                <table border="0" cellpadding="0" cellspacing="0" class="grid">
                  <thead>
                    <tr class = "first" >
                      <th class="col-row-select"><input type="checkbox" name="row_selected[]" id="checkbox_1" /></th>

                      <th>Title</th>
                      <th colspan="3">Edit</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr class="odd">
                      <td class="col-row-select"><input type="checkbox" name="row_selected[]" id="checkbox_2" /></td>
                      <td><a href="">Lorem ipsum dolor sit</a></td>

                      <td class="col-row-action"><a href=""><img src="images/icon_edit.png" alt="edit" /></a></td>
                      <td class="col-row-action"><a href=""><img src="images/icon_delete.png" alt="delete" /></a></td>
                      <td class="col-row-action last"><a href=""><img src="images/icon_tool.png" alt="tools" /></a></td>
                    </tr>
                    <tr class="par">
                      <td class="col-row-select"><input type="checkbox" name="row_selected[]" id="checkbox_3" /></td>
                      <td><a href="">Lorem ipsum dolor sit</a></td>
                      <td class="col-row-action"><a href=""><img src="images/icon_edit.png" alt="edit" /></a></td>

                      <td class="col-row-action"><a href=""><img src="images/icon_delete.png" alt="delete" /></a></td>
                      <td class="col-row-action last"><a href=""><img src="images/icon_tool.png" alt="tools" /></a></td>
                    </tr>
                    <tr class="odd">
                      <td class="col-row-select"><input type="checkbox" name="row_selected[]" id="checkbox_4" /></td>
                      <td><a href="">Lorem ipsum dolor sit</a></td>
                      <td class="col-row-action"><a href=""><img src="images/icon_edit.png" alt="edit" /></a></td>
                      <td class="col-row-action"><a href=""><img src="images/icon_delete.png" alt="delete" /></a></td>

                      <td class="col-row-action last"><a href=""><img src="images/icon_tool.png" alt="tools" /></a></td>
                    </tr>
                  </tbody>
                </table>
                <div class="grid-panel padding-lr-5">
                  <ul class="navigation">
                    <li class="previous"><a class="link-button" href=""></a></li>
                    <li class="selected"><a class="link-button" >1</a></li>

                    <li><a class="link-button" href="">2</a></li>
                    <li><a class="link-button" href="">3</a></li>
                    <li><a class="link-button" href="">4</a></li>
                    <li class="next"><a class="link-button" href=""></a></li>
                  </ul>
                  <div class="clear"></div>
                  <select name="select_action" style="width:254px;">

                    <option value="0" selected="selected">Choose an action</option>
                    <option value="1">Action 1</option>
                    <option value="2">Action 2</option>
                  </select>
                  <div class="clear"></div>
                  <a id="apply-to-selection" class="link-button submit margin-lr-10" href=""><span>Apply to selection</span></a>
                  <div class="clear"></div>

                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div class="notification error">
        <div class="notification-border-top"></div>
        <div class="notification-border-middle"> <span>Error Notification</span> </div>

        <div class="notification-border-bottom"></div>
      </div>
      <div class="notification success">
        <div class="notification-border-top"></div>
        <div class="notification-border-middle"> <span>Success Notification</span> </div>
        <div class="notification-border-bottom"></div>
      </div>

      <div class="notification info">
        <div class="notification-border-top"></div>
        <div class="notification-border-middle"> <span>Info Notification</span> </div>
        <div class="notification-border-bottom"></div>
      </div>
      <div class="notification warning">
        <div class="notification-border-top"></div>

        <div class="notification-border-middle"> <span>Warning Notification</span> </div>
        <div class="notification-border-bottom"></div>
      </div>
    </div>
    <div class="frame-border-bottom-lined"></div>
  </div>
  <div class="frame">

    <div class="frame-border-top-2"></div>
    <div class="frame-border-middle-2">
      <h1>H1 tag header</h1>
      <h2>H2 tag header</h2>
      <h3>H3 tag header</h3>
      <h4>H4 tag header</h4>
      <br />

      <h4>LIST</h4>
      <ul>
        <li>Curabitur eu sapien eget.</li>
        <li>Etiam quis est non velit facilisis</li>
        <li>Vivamus adipiscing auctor quam</li>
      </ul>
      <ol>

        <li>Curabitur eu sapien eget.</li>
        <li>Etiam quis est non velit facilisis</li>
        <li>Vivamus adipiscing auctor quam</li>
      </ol>
    </div>
    <div class="frame-border-bottom-2"></div>
  </div>

  <div class="frame">
    <div class="frame-border-top-lined"></div>
    <div class="frame-border-middle"> <a id="apply-to-selection-2" class="link-button submit margin-lr-10" href=""><span>Apply to selection</span></a>
      <div class="clear"></div>
    </div>
    <div class="frame-border-bottom"></div>
  </div>
</div>

</body>
</html>
